<template>
  <div class="payment-center">
    <h1 class="title">智电支付中心</h1>
    <div class="payment-summary" v-if="recentPayments.length">
      <h2>最近交易</h2>
      <ul>
        <li v-for="payment in recentPayments" :key="payment.id">
          {{ payment.date }} - {{ payment.method }}: ￥{{ payment.amount }}
        </li>
      </ul>
    </div>
    <div class="payment-options">
      <div v-for="option in paymentOptions" :key="option.name" class="payment-option" @click="selectPayment(option.name)">
        <div class="option-container" :class="{ 'selected': selectedPayment === option.name }">
          <img :src="option.qrcode" :alt="option.name" class="qr-code" />
          <p>{{ option.name }}</p>
          <div class="feature-list">
            <span v-for="feature in option.features" :key="feature" class="feature-tag">{{ feature }}</span>
          </div>
          <div class="popularity-meter">
            <div class="meter-fill" :style="{ width: option.popularity + '%' }"></div>
          </div>
          <p class="popularity-text">使用率: {{ option.popularity }}%</p>
        </div>
      </div>
    </div>
    <div v-if="selectedPayment" class="selected-payment">
      <h2>您已选择: {{ selectedPayment }}</h2>
      <p>请扫描上方二维码完成支付</p>
      <div class="payment-amount">
        <input v-model="paymentAmount" type="number" placeholder="输入支付金额" @input="calculateDiscount" />
        <span class="currency">￥</span>
      </div>
      <p v-if="discountedAmount" class="discount-info">优惠后金额: ￥{{ discountedAmount }}</p>
      <button @click="confirmPayment" class="confirm-button">确认支付</button>
    </div>
    <div class="promotion-banner" v-if="showPromotion">
      <p>🎉 限时优惠: 使用微信支付享受9折优惠! 🎉</p>
      <button @click="closePromotion" class="close-promotion">X</button>
    </div>
    <div class="quick-pay-section">
      <h2>快速支付</h2>
      <div class="quick-pay-buttons">
        <button v-for="amount in quickPayAmounts" :key="amount" @click="setQuickPayAmount(amount)" class="quick-pay-button">
          ￥{{ amount }}
        </button>
      </div>
    </div>
    <div class="payment-tips">
      <h3>支付小贴士</h3>
      <p>{{ currentTip }}</p>
      <button @click="getNextTip" class="next-tip-button">下一条贴士</button>
    </div>
  </div>
</template>

<script>
import weixin from '@/assets/images/weixin.png'
import zhifubao from '@/assets/images/weixin.png'
import yinhangka from '@/assets/images/weixin.png'

export default {

  name: 'PaymentCenter',
  data() {
    return {
      paymentOptions: [
        {
          name: '微信支付',
          qrcode: weixin,
          features: ['快速', '安全', '优惠'],
          popularity: 65
        },
        {
          name: '支付宝',
          qrcode: zhifubao,
          features: ['便捷', '积分'],
          popularity: 30
        },
        {
          name: '银行卡',
          qrcode: yinhangka,
          features: ['传统', '可靠'],
          popularity: 5
        },
      ],
      selectedPayment: null,
      paymentAmount: '',
      discountedAmount: null,
      showPromotion: true,
      quickPayAmounts: [10, 20, 50, 100],
      recentPayments: [
        { id: 1, date: '2023-07-15', method: '微信支付', amount: 50 },
        { id: 2, date: '2023-07-14', method: '支付宝', amount: 100 },
        { id: 3, date: '2023-07-13', method: '银行卡', amount: 200 },
      ],
      paymentTips: [
        "使用指纹或面部识别可以让您的支付更安全。",
        "定期检查您的支付账单，以防止未经授权的交易。",
        "避免在公共Wi-Fi网络上进行支付操作。",
        "设置支付提醒，帮助您控制支出。",
        "使用虚拟信用卡号码可以增加在线支付的安全性。"
      ],
      currentTipIndex: 0
    }
  },
  computed: {
    currentTip() {
      return this.paymentTips[this.currentTipIndex];
    }
  },
  methods: {
    selectPayment(paymentName) {
      this.selectedPayment = paymentName;
      this.calculateDiscount();
    },
    calculateDiscount() {
      if (this.selectedPayment === '微信支付' && this.showPromotion && this.paymentAmount) {
        this.discountedAmount = (this.paymentAmount * 0.9).toFixed(2);
      } else {
        this.discountedAmount = null;
      }
    },
    confirmPayment() {
      if (!this.paymentAmount) {
        alert('请输入支付金额!');
        return;
      }
      let message = `您已确认使用${this.selectedPayment}支付 ￥${this.paymentAmount}。`;
      if (this.discountedAmount) {
        message += `\n已应用9折优惠, 实际支付金额: ￥${this.discountedAmount}`;
      }
      alert(message + '\n谢谢您的使用!');
      this.addRecentPayment();
      this.resetPaymentForm();
    },
    closePromotion() {
      this.showPromotion = false;
      this.calculateDiscount();
    },
    setQuickPayAmount(amount) {
      this.paymentAmount = amount;
      this.calculateDiscount();
    },
    addRecentPayment() {
      const newPayment = {
        id: this.recentPayments.length + 1,
        date: new Date().toISOString().split('T')[0],
        method: this.selectedPayment,
        amount: this.discountedAmount || this.paymentAmount
      };
      this.recentPayments.unshift(newPayment);
      if (this.recentPayments.length > 3) {
        this.recentPayments.pop();
      }
    },
    resetPaymentForm() {
      this.selectedPayment = null;
      this.paymentAmount = '';
      this.discountedAmount = null;
    },
    getNextTip() {
      this.currentTipIndex = (this.currentTipIndex + 1) % this.paymentTips.length;
    }
  }
}
</script>

<style scoped>
.payment-center {
  text-align: center;
  background-color: #f5faf5;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  position: relative;
}

.title {
  color: #2e7d32;
  font-size: 2.5em;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.payment-summary {
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.payment-summary ul {
  list-style-type: none;
  padding: 0;
}

.payment-summary li {
  margin: 10px 0;
  font-size: 0.9em;
  color: #555;
}

.payment-options {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.payment-option {
  margin: 10px;
  transition: all 0.3s ease;
}

.option-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.option-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.option-container.selected {
  border: 3px solid #2e7d32;
  transform: scale(1.05);
}

.qr-code {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.payment-option p {
  margin-top: 10px;
  font-weight: bold;
  color: #555;
}

.feature-list {
  margin-top: 10px;
}

.feature-tag {
  display: inline-block;
  background-color: #c8e6c9;
  color: #2e7d32;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8em;
  margin: 2px;
}

.popularity-meter {
  height: 5px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin-top: 10px;
}

.meter-fill {
  height: 100%;
  background-color: #2e7d32;
  border-radius: 3px;
}

.popularity-text {
  font-size: 0.8em;
  color: #777;
  margin-top: 5px;
}

.selected-payment {
  margin-top: 30px;
  padding: 20px;
  background-color: #e8f5e9;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.payment-amount {
  position: relative;
  display: inline-block;
  margin: 15px 0;
}

.payment-amount input {
  padding: 10px 10px 10px 25px;
  font-size: 1.1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 200px;
}

.currency {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.discount-info {
  color: #2e7d32;
  font-weight: bold;
}

.confirm-button {
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 1.1em;
  background-color: #2e7d32;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.confirm-button:hover {
  background-color: #28722c;
}

.promotion-banner {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #c8e6c9;
  color: #2e7d32;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
  animation: bounce 2s infinite;
}

.close-promotion {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  color: #2e7d32;
  cursor: pointer;
}

.quick-pay-section {
  margin-top: 30px;
}

.quick-pay-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.quick-pay-button {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #2e7d32;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.quick-pay-button:hover {
  background-color: #28722c;
}

.payment-tips {
  margin-top: 30px;
  padding: 15px;
  background-color: #e8f5e9;
  border-radius: 8px;
}

.next-tip-button {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 0.9em;
  background-color: #2e7d32;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.next-tip-button:hover {
  background-color: #28722c;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.payment-option, .selected-payment {
  animation: fadeIn 0.5s ease-out;
}
</style>